<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Jquery.Dom.Route</title>
        <style type='text/css'>
            body {font-family: verdana; font-size: 11px;}
            .blue {color: #56638c; font-size: 12px}
            .green {color: #007000;}
            #data_update {width: 49%; float:right;}
            #hash_update {width: 49%; float:left;}
            #data_update_target, #hash_update_target {
                height: 420px; overflow:scroll; border: 1px solid black;
            }
            .comments {height: 70px;}
        </style>
	</head>
	<body>
	    <h1>$.Route Demo</h1>
        <div><a href="/jquery/dom/route/qunit.html">View qunit test results</a></div>
        <br />
        <div id="hash_update">
            <div class="comments">
                <span class="blue">Use these links to modify the hash or change it directly in the address bar:</span>
                <br /><br />
                URLs with a registered path:
                <a href="#!pages/val1/val2/val3">#!pages/val1/val2/val3</a>
                <a href="#!pages/val1//">#!pages/val1//</a>
                <a href="#!pages///">#!pages///</a>
                <a href="#!/val1/val2">#!/val1/val2</a>
                <br />
                URLs without paths: 
                <a href="#!pages//">#!pages//</a>
                <a href="#!pages//">#!///</a>
                <br />
                Empty hash:
                <a href="#!">#!</a>
            </div>
            <h2>Hash update events:</h2>
            <div id="hash_update_target"></div>
        </div>
        <div id="data_update">
            <div class="comments">
                <form id="data_form">
                    Value1: <input type="text" id="var1" name="var1" /><br />
                    Value2: <input type="text" id="var2" name="var2" /><br />
                    Value3: <input type="text" id="var3" name="var3" />
                    <input name="submit" id="submit" type="submit" value="Change the data" />
                </form>
            </div>
            <h2>Data update events:</h2>
            <div id="data_update_target"></div>
        </div>

		<script type='text/javascript' src='../../../steal/steal.js'></script>
		<script type='text/javascript'>
            steal('jquery/dom/route', 'jquery/lang/json', 'jquery/dom/form_params',
            function() {
                
                window.location.hash = "";
                $('#data_update_target').html();
                $('#hash_update_target').html();
                var hash_cnt = 0, data_cnt = 0;
                
                $.route.routes = {};
                $.route("");
                $.route("pages/:var1/:var2/:var3", {
                    'var1': 'default1',
                    'var2': 'default2',
                    'var3': 'default3'
                });
                $.route("/:var1/:var2", {
                    'var1': 'def1',
                    'var2': 'def2'
                });
                
                $(window).bind('hashchange', function() {
                    $('#hash_update_target').append( ++hash_cnt + ": Hash: <span class=\"green\">" + window.location.hash )
                                            .append( "</span> Route data: " + $.toJSON( $.route.data._data ) + "<br />" );
                });

                $.route.bind('change', function(ev, attr, how, newVal, oldVal){
                    $('#data_update_target').append( ++data_cnt + ": <span class=\"green\">" + showChange(attr, how, newVal, oldVal) )
                                            .append( "</span> Route data: " + $.toJSON( $.route.data._data ) + "<br />" );
                });

                showChange = function(attr, how, newVal, oldVal){
                    switch (how) {
                    case "set" :
                        $('#data_form > #' + attr).val(newVal);
                        return (how + " " + attr + ": " + oldVal + " => " + newVal);
                        break;
                    case "remove" :
                        $('#data_form > #' + attr).val('');
                        return (how + " " + attr);
                        break;
                    case "add" :
                        $('#data_form > #' + attr).val(newVal);
                        return (how + " " + attr + ": " + newVal);
                        break;
                    }
                }
                
                $('#data_form').bind('submit', function() {
                    data = $('#data_form').formParams();
                    for (var val in data) {
                        if (data[val] == "") {
                            delete data[val];
                        }
                    }
                    $.route.attrs(data, true);
                    return false;
                });
            })
		</script>
    </body>
</html>